<template>
	<view class="container">
		<view class="top-jf-div">
			<view class="top-jf-num">
				<view class="big-num">
					{{userCenterData.user.allScore}}
				</view>
				<view class="small-text">我的积分</view>
			</view>
			<view class="top-jf-btn" @click="$public.navto('/pages/index/jifen')">
				积分明细
			</view>
			<view class="bottom-div">

			</view>
		</view>
		<view class="tabs">
			<view class="ss-div" v-if="showSS">
				<view class="ss-div-ss">
					<uni-search-bar placeholder="输入你的信息" @input="search" v-model="word" cancelButton="none" class="sousuokuang">
					</uni-search-bar>
				</view>
			</view>

			<view class="top_nav">
				<scroll-view id="tab-bar" class="scroll-h" :scroll-x="true" :show-scrollbar="true"
					:scroll-into-view="scrollInto">
					<view v-for="(tab,index) in tabBars" :key="tab.columnId" class="uni-tab-item" :id="tab.columnId"
						:data-current="index" @click="ontabtap" :class="tabIndex==index ? 'uni-tab-item-title-active' : ''">
						<text class="uni-tab-item-title">{{tab.title}}</text>
					</view>
				</scroll-view>
				<view class="" @click="showSS=!showSS">
					<image src="../../static/wlss.png" mode="scaleToFill" class="ssimage"></image>
				</view>
			</view>
			<view class="line-h"></view>
			<view class="newslist">
				<view class="list" v-for="item in newsList" :key="item.productId"
					@click="$public.navto('detail',{productId:item.productId})">
					<image :src="$public.imgageUrl(item.smallImage)" mode="scaleToFill" class="image"></image>
					<view class="title">
						{{item.title}}
					</view>
					<view class="jifen">
						<!-- <view class="jifen-l">
							<image src="../../static/wljfimg.png" mode="scaleToFill" class="jifenimage"></image>
							2
						</view> -->
						<view class="blue">¥：{{item.money}}</view>
					</view>
					<view class="duihuantext">
						已兑换{{item.exchangeNum}}件
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				cacheTab: [],
				tabIndex: 0,
				tabBars: [],
				scrollInto: "",
				showTips: false,
				navigateFlag: false,
				pulling: false,
				allNewsList: [],
				word: "",
				showSS: false,
				userCenterData: {
					user: {}
				}
			};
		},
		onLoad(options) {
			this.$public.showLoading()
			this.getMallColumn()
			if (options.word) {
				this.word = decodeURIComponent(options.word)
			}
			this.getProductList()
			this.getUserInfo()

		},
		onShow() {
			if (!this.$public.isLoginUrl())
				return false;
		},
		methods: {
			search(value) {
				console.log("value", value)
				this.word = value
				this.switchTab(this.tabIndex)
			},
			getMallColumn() {
				this.$public.htmlPost("/api/getMallColumn", {
					parentId: 1
				}).then((res) => {
					// console.log("getMallColumn res", res)
					let data = res.data;
					if (data.code == 0) {
						this.tabBars.push({
							columnId: 0,
							title: "好物推荐"
						})

						data.data.forEach(item => {
							this.tabBars.push(item)
						})
					}
				})
			},
			async getProductList() {
				let params = {
					orderByColumn: "createTime",
					isAsc: "desc",
					typeId: 1
				}
				// if (this.word)
				// 	params.keyword = this.word
				this.$public.htmlPost("/api/getProductList", params).then((res) => {
					// console.log("getProductList res", res)
					let data = res.data;
					if (data.code == 0) {
						data.data.forEach(item => {
							let json = JSON.parse(item.referenceMoney)
							item.money = json.money + "+" + json.referenceMoney + '积分'
							this.newsList.push(item)
							this.allNewsList.push(item)
						})
						if (this.word) {
							this.switchTab(0)
						}
					}
					uni.hideLoading();
				})
			},
			ontabtap(e) {
				let index = e.target.dataset.current || e.currentTarget.dataset.current;
				// console.log("index", index)
				this.switchTab(index);
			},
			switchTab(index) {
				// if (this.tabIndex === index) {
				// 	return;
				// }
				this.newsList = []
				let word = this.word;
				if (index == 0) {
					if (word) {
						this.allNewsList.forEach(item => {
							if (item.title.indexOf(word) >= 0)
								this.newsList.push(item)
						})
					} else {
						this.allNewsList.forEach(item => {
							this.newsList.push(item)
						})
					}
				} else {
					let columnId = this.tabBars[index].columnId
					if (word) {
						this.allNewsList.forEach(item => {
							if (item.title.indexOf(word) >= 0 && item.columnId == columnId)
								this.newsList.push(item)
						})
					} else {
						this.allNewsList.forEach(item => {
							if (item.columnId == columnId) {
								this.newsList.push(item)
							}
						})
					}

				}
				this.tabIndex = index;
				this.scrollInto = this.tabBars[index].id;
			},
			async getUserInfo() {
				this.$public.htmlPost("/api/getUserInfo").then((res) => {
					let data = res.data
					if (data.code == 0) {
						this.userCenterData.user = data.data
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ss-div {
		padding: 30rpx 0;

		.ss-div-ss {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 82rpx;
			padding: 0 20rpx;
			color: rgba(0, 0, 0, .55);
			box-shadow: 0 0 20rpx rgba(0, 0, 0, .2);
			border-radius: 10rpx;

			/deep/.uni-searchbar,
			.sousuokuang {
				width: 100%;
			}

			.ssimg {
				width: 37rpx;
				height: 40rpx;
			}
		}

	}

	.tabs {
		flex: 1;
		flex-direction: column;
		overflow: hidden;
		background-color: #ffffff;
		padding: $uni-wrap-padding;

		.ssimage {
			width: 37rpx;
			height: 40rpx;
		}

		.top_nav {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	.scroll-h {
		width: 630rpx;
		height: 80rpx;
		flex-direction: row;
		white-space: nowrap;
		/* flex-wrap: nowrap; */
		/* border-color: #cccccc;
		border-bottom-style: solid;
		border-bottom-width: 1px; */
	}

	.line-h {
		height: 1rpx;
		background-color: #cccccc;
	}

	.uni-tab-item {
		/* #ifndef APP-PLUS */
		display: inline-block;
		/* #endif */
		flex-wrap: nowrap;
		padding-left: 34rpx;
		padding-right: 34rpx;
		color: #555;
	}

	.uni-tab-item-title {
		font-size: 30rpx;
		height: 74rpx;
		line-height: 74rpx;
		flex-wrap: nowrap;
		white-space: nowrap;
	}

	.uni-tab-item-title-active {
		color: #DF686A;
		border-bottom: 6rpx solid #DF686A;
	}

	.newslist {
		padding-top: 55rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding-bottom: 55rpx;

		.list {
			width: 320rpx;
			margin-bottom: 60rpx;

			.image {
				width: 320rpx;
				height: 320rpx;
				border-radius: 10rpx;
			}

			.title {
				font-size: 26rpx;
				color: #555555;
				padding-top: 20rpx;
			}

			.jifen {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				color: #ff9600;
				font-size: 28rpx;
				padding: 10rpx 0;

				.jifen-l {
					display: flex;
					align-items: center;
				}

				.jifenimage {
					width: 31rpx;
					height: 27rpx;
					margin-right: 10rpx;
				}

				.blue {
					color: #DF686A;
					font-size: 24rpx;
				}
			}

			.duihuantext {
				color: #666666;
				font-size: 22rpx;
			}
		}
	}

	.top-jf-div {
		height: 224rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		padding-bottom: 30rpx;
		background: linear-gradient(180deg, #e37164 0%, #EE8D56 100%);

		.top-jf-num {
			color: #FFFFFF;
			text-align: center;

			.big-num {
				font-size: 64rpx;
				font-family: DIN-Medium, DIN;
				font-weight: 500;

			}

			.small-text {
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.7);
				margin-top: 20rpx;
			}
		}

		.top-jf-btn {
			position: absolute;
			right: 30rpx;
			top: 24rpx;
			width: 144rpx;
			height: 48rpx;
			background: #DF686A;
			border-radius: 24rpx;
			color: #fff;
			font-size: 24rpx;
			text-align: center;
			line-height: 48rpx;
		}

		.bottom-div {
			background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, #FFFFFF 100%);

			border-radius: 40rpx 40rpx 0rpx 0rpx;
			position: absolute;
			bottom: 0;
			height: 30rpx;
			width: 100%;
		}
	}
</style>